<template>
  <div class="width-style">
    <div>
      <el-row :gutter="20" class="page-top">
        <el-col :span="9">
          <div class="ncc-title">
            <el-row :gutter="10">
              <el-col :span="8">
                <img alt='' src="@/assets/images/earth.jpg" class="new-champions-control-img" />
              </el-col>
              <el-col :span="6">
                <div>
                  <el-link class="ncc-link" style="width: 114px" href="https://kjc.lvu.edu.cn/b4/5d/c457a46173/page.htm" target="_blank">新冠是什么？</el-link>
                </div>
                <div>
                  <el-link class="ncc-link" style="width: 133px" href="https://jingyan.baidu.com/article/63acb44a90120020fcc17ef4.html" target="_blank">新冠如何传播？</el-link>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="ncc-title">
            <el-row :gutter="10">
              <el-col :span="8">
                <img src="@/assets/images/teacher.jpg" class="new-champions-control-img" />
              </el-col>
              <el-col :span="6">
                <div>
                  <el-link class="ncc-link" style="width: 182px" href="https://baike.baidu.com/item/%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E8%82%BA%E7%82%8E/24282529?fromtitle=%E6%96%B0%E5%86%A0%E8%82%BA%E7%82%8E&fromid=55661602&fr=aladdin" target="_blank">2分钟认识新冠病毒！</el-link>
                </div>
                <div>
                  <el-link class="ncc-link" style="width: 247px" href="http://ask.39.net/question/66039279.html" target="_blank">新型冠状病毒是如何传播的？</el-link>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="15">
          <div style="width: 100%;height: 20px;text-align: right;"><span style="color:#8d9094;font-size:13px">https://2019ncov.chinacdc.cn/2019-nCoV/global.html</span></div>
          <div style="width: 100%;height: 430px;">
            <iframe style="width: 100%; height: 400px;" src="https://2019ncov.chinacdc.cn/2019-nCoV/global.html" allowfullscreen="allowfullscreen" data-id="1"></iframe>
          </div>
        </el-col>
<!--        <el-col :span="6">-->
<!--          <div style="min-height: 36px;height: 240px;">-->
<!--            <Download />-->
<!--          </div>-->
<!--        </el-col>-->
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content">
<!--          <InnerModuleLong innerModuleName="身体常识" :list="commonList"  :picSrc="require('@/assets/images/bodyUseCommon.png')" routeName="/bodyguide/commonsense"/>-->
          <InnerModuleLong innerModuleName="疫情速报" :list="informationList"  :picSrc="require('@/assets/images/diseaseData.jpg')" routeName="/covidControl/epidemicInformation"/>
          <InnerModuleLong innerModuleName="病毒变种"  :list="varietyList"  :picSrc="require('@/assets/images/virus.jpg')" routeName="/covidControl/variety"/>
          <InnerModuleLong innerModuleName="个人防护"  :list="protectionList"  :picSrc="require('@/assets/images/personalProtect.jpg')" routeName="/covidControl/protection"/>
          <InnerModuleLong innerModuleName="各地防控"  :list="policiesList" :picSrc="require('@/assets/images/policy.jpg')" routeName="/covidControl/regionalPolicies"/>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <ModuleAdviser :doctorList="doctorList"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ModuleAdviser from "@/components/moduleAdviser.vue";
import InnerModule from "@/components/innerModule.vue";
import {renderTime} from '@/utils/tools.js'

export default {
  layout: "homeLayout",
  components: { ModuleAdviser, InnerModule},
  // props:['moduleName'],
  async asyncData({app}) {
    //获取当前类下的最热文章
    let res = await app.api.reqGeneralAllByCatalogue(12);
    if (res.code === 200) {
      for (let item of res.rows) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    //获取医生等列表
    let doctorRes=await app.api.reqAllDoctor();
    if(doctorRes.code===200){
      for(let doctor of doctorRes.rows){
        doctor.doctorAvatar=app.api.BASEURL+doctor.doctorAvatar
      }
    }
    //获取当类下的子分类的文章
    let informationRes = await app.api.reqCoreGeneralByPage(40,1,5);//疫情速报
    if (informationRes.code === 200) {
      for (let item of informationRes.rows) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    let varietyRes = await app.api.reqCoreGeneralByPage(41,1,5);//病毒变种
    if (varietyRes.code === 200) {
      for (let item of varietyRes.rows) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
    let protectionRes = await app.api.reqCoreGeneralByPage(42,1,5);//个人防护
    if (protectionRes.code === 200) {
      for (let item of protectionRes.rows) {
        item.publishTime = renderTime(item.publishTime);
      }
    }
      let policiesRes = await app.api.reqCoreGeneralByPage(43,1,5);//各地防控
      if (policiesRes.code === 200) {
        for (let item of policiesRes.rows) {
          item.publishTime = renderTime(item.publishTime);
        }
      }
      return {
        // catagoryList:res.rows,
        doctorList:doctorRes.rows,
        informationList: informationRes.rows,
        varietyList: varietyRes.rows,
        protectionList: protectionRes.rows,
        policiesList: policiesRes.rows,
      }
    },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.grid-content {
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.module-name {
  font-size: 20px;
  .icon-traditional {
    font-size: 24px;
    color: @themeColor;
  }
}
.new-champions-control-img {
  width: 120px;
  height: 120px;
  margin-left: 20px;
  margin-bottom: 10px;
  margin-right: 20px;
}
.ncc-title{
  margin-bottom: 70px;
}
.ncc-link{
  font-size: 19px;
  margin-top: 20px;
  margin-bottom: 10px;

}
</style>
